<template>
	<view class="content">
		<u-navbar leftIconSize="32rpx" :placeholder="true" :fixed="true" :safeAreaInsetTop="true" :autoBack="true"
			bgColor="#ec6a38" :border-bottom="false">
			<view slot="left">
				<u-icon @click="back" size="42" name="arrow-left" color="#fff"></u-icon>
			</view>
			<view slot="center" style="display: flex;justify-content: center;color: #fff;">
				调整计划
			</view>
			<!-- #ifdef APP-PLUS -->
			<view slot="right" style="color: #fff;" @click="goLink(0)">
				预览
			</view>
			<!-- #endif -->
		</u-navbar>
		<view class="bank">
			<image :src="dataJson.plan.bank_logo" mode="aspectFill"></image>
			{{dataJson.plan.bank_name}}({{dataJson.plan.card_number}})

			<!-- #ifdef MP-WEIXIN -->
			<view class="load" @click="goLink(0)">
				预览
			</view>
			<!-- #endif -->

		</view>
		<view class="moneryInfo">
			<view class="items">
				<view class="l">
					还款金额
				</view>
				<view class="r">
					¥{{dataJson.plan.amount}}
				</view>
			</view>
			<view class="items">
				<view class="l">
					消费手续费
				</view>
				<view class="r">
					¥{{dataJson.plan.consume_fee}}

				</view>
			</view>
			<view class="items">
				<view class="l">
					还款笔数费
				</view>
				<view class="r">
					¥{{dataJson.plan.repayment_fee}}
				</view>
			</view>
			<view class="items">
				<view class="l">
					总手续费共计：
				</view>
				<view class="r">
					¥{{allMoney}}
				</view>
			</view>
		</view>
		<view class="bankInfo">
			<view class="items">
				<view class="l">
					消费日期
				</view>
				<view class="r" @click="timeShowFlag()">
					{{dateList.join(',')}}
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="items">
				<view class="l">
					消费城市
				</view>
				<view class="r" @click="openCity()">
					{{cityInfo}}
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="items">
				<view class="l">
					还款方式
				</view>
				<view class="r" @click="repaymentType.show=!repaymentType.show">
					{{repaymentType.list[repaymentType.index].show_name}}
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="items">
				<view class="l">
					还款通道
				</view>
				<view class="r" @click="channel.show=true">
					{{channel.list[channel.index].show_name}}
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- 预留额度 -->
		<view class="reserve">
			您需要预留额度：<text>¥{{dataJson.plan.reserve_amount}}</text>
		</view>
		<view class="btn" @click="bangka(1)">
			下一步
		</view>
		<u-calendar :show="timeShow" ref="calendar" color="#ec6a38" :defaultDate="dateList" title="选择消费日期"
			:showSubtitle="false" rowHeight="120" mode="multiple" @confirm="timeChange" @close="timeShow=false">
		</u-calendar>
		<!-- 地区选择 -->
		<u-picker :show="city.cityShow" ref="cityPicker" :defaultIndex="city.defaultIndex" :closeOnClickOverlay="true"
			title="选择开户省市" :columns="city.provinceData" visibleItemCount="16" @change="cityChange"
			@confirm="cityConfirm" @cancel="playCancel">
		</u-picker>
		<!-- <u-picker :show="cityShow"  mode="region" :columns="defaultRegion" :regionNum="2" @confirm="confirm"
			@cancel="playCancel"> </u-picker> -->
		<!-- 还款方式选择 -->
		<u-picker :show="repaymentType.show" itemHeight="100" :defaultIndex="repaymentType.defaultIndex" title="选择还款方式"
			keyName="name" :columns="[repaymentType.list]" @cancel="playCancel" @confirm="playType">
		</u-picker>
		<!-- 还款通道选择 -->
		<u-picker :show="channel.show" itemHeight="100" :defaultIndex="channel.defaultIndex" title="选择还款通道"
			keyName="show_name" :columns="[channel.list]" @cancel="playCancel" @confirm="roadType">
		</u-picker>
		<!-- <u-picker :show="roadShow" mode="selector" :defaultSelector="roadVlaue" @cancel="playCancel" :range="roadList"
			@confirm="roadType">
		</u-picker> -->
	</view>
</template>
<script>
	import {
		areaId
	} from '@/common/http.api.js'
	import {
		makeUpdate,
		cAuthentication,
		planMakeCon
	} from '@/common/creditcardmachine.api.js'
	export default {
		data() {
			return {
				allMoney: '',
				params: {},
				dateList: [],
				dateList2: [],
				// 时间选择
				timeShow: false,
				start_date: '',
				end_date: '',
				cityShow: false,
				cityInfo: "请选择",

				repaymentType: {
					show: false,
					list: [],
					defaultIndex: [0],
					index: 0
				},
				channel: {
					show: false,
					list: [],
					defaultIndex: [0],
					index: 0
				},

				typeShow: false,
				typeList: [
					['一天一还', '一天二还']
				],
				typeName: '一天一还',
				typeVlaue: [0],

				roadShow: false,
				roadList: ['大额1800KTFC', '1800KTFC'],
				roadName: '大额1800KTFC',
				repayment_type: [],
				roadVlaue: [0],
				dataJson: {},
				deCode: "",
				defaultRegion: [], //默认地区数组
				background: {
					backgroundColor: '#ec6a38',
				},

				city: {
					cityShow: false,
					cityInfo: "请选择",
					provinceData: [],
					cityData: [],
					defaultIndex: [0, 0]
				},
			}
		},
		onReady() {
			// this.$refs.calendar.setFormatter(this.formatter)
		},
		onLoad(option) {
			this.deCode = JSON.parse(option.deCode)
			this.dataJson = JSON.parse(option.deCode)
			this.dateList = this.dataJson.plan.date_list;

			this.allMoney = (this.dataJson.plan.repayment_fee * 1 + this.dataJson.plan.consume_fee * 1).toFixed(2)

			this.repaymentType.list = this.dataJson.repayment_type;
			this.channel.list = this.dataJson.channel;

			this.params.plan_day = this.dataJson.plan.date_list;;
			this.params.bankcard_id = this.dataJson.plan.user_bankcards_id;
			this.params.daily_repayment_times = this.dataJson.plan.daily_repayment_times
			this.params.repayment_money = this.dataJson.plan.amount
			this.params.plan_id = this.dataJson.plan.id;
			this.params.channel = this.dataJson.plan.channel;
			this.params.province = this.dataJson.plan.province;
			this.params.city = this.dataJson.plan.city;
			this.getAreaList()
		},
		methods: {
			back() {
				this.$u.route({
					type: 'navigateBack'
				})
			},
			timeShowFlag() {
				this.timeShow = true;
				// this.$nextTick(() => {
				//     this.$refs.calendar.setDate(this.start_date, this.end_date)
				// })
			},
			getAreaList() {
				areaId().then(res => {
					this.areaList = res;
					let tmpCity = []
					let tmpProvince = []
					let defaultCity = 0
					for (let i = 0; i < this.areaList.length; i++) {
						tmpProvince.push(this.areaList[i].name)
						for (let j = 0; j < this.areaList[i].city.length; j++) {
							tmpCity.push(this.areaList[i].city[j].name)

							//xiugai 
							if (this.deCode) {
								if (this.params.province == this.areaList[i].id && this.params.city == this
									.areaList[i].city[j].id) {
									this.city.defaultIndex = [i, j]
									this.cityInfo = this.areaList[i].name + ' ' + this.areaList[i].city[j].name
									defaultCity = i
								}
							}
						}
						this.city.cityData.push(tmpCity)
						tmpCity = []
					}

					this.city.provinceData.push(tmpProvince)
					this.city.provinceData.push(this.city.cityData[defaultCity])
				})
			},
			cityChange(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.cityPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.city.cityData[index])
				}
			},

			timeChange(e) {
				this.timeShow = false
				e.sort()
				this.dateList = e;

				if (JSON.stringify(this.params.plan_day) != JSON.stringify(e)) {
					this.params.plan_day = e
					this.getMakeUpdate()
				}
			},
			getMakeUpdate() {
				uni.showLoading({
					title: '正在重新生成计划...'
				})
				makeUpdate(this.params).then(res => {
					uni.hideLoading()

					this.dataJson = res
					this.allMoney = (this.dataJson.plan.repayment_fee * 1 + this.dataJson.plan.consume_fee * 1)
						.toFixed(2)
					this.dateList = res.plan.date_list;

					this.repaymentType.list = res.repayment_type
				})
			},
			playCancel() {
				this.city.cityShow = false;
				this.repaymentType.show = false
				this.channel.show = false;
			},
			// 城市地区选择
			openCity() {
				this.city.cityShow = !this.city.cityShow;
			},
			cityConfirm(e) {
				this.params.city = this.areaList[e.indexs[0]].city[e.indexs[1]].id
				this.params.province = this.areaList[e.indexs[0]].id
				this.cityInfo = this.areaList[e.indexs[0]].name + ' ' + this.areaList[e.indexs[0]].city[e.indexs[1]].name

				this.city.cityShow = false;
			},
			// 还款方式选择
			playType(e) {
				this.repaymentType.show = false;

				if (this.params.daily_repayment_times != e.value[0].value) {
					this.repaymentType.index = e.indexs[0]
					this.params.daily_repayment_times = e.value[0].value
					this.getMakeUpdate()
				}
			},
			roadType(e) {
				this.channel.show = false;

				if (this.params.channel != e.value[0].id) {
					this.channel.index = e.indexs[0]
					this.params.channel = e.value[0].id
					this.getMakeUpdate()
				}
			},
			openPage(path, params = {}) {
				this.$u.route({
					url: path,
					params
				})
			},
			goLink(e) {
				let params = {
					deCode: {}
				};
				if (e == 1) {
					params.id = this.dataJson.plan.id
				}
				params.deCode = JSON.stringify(this.dataJson.plan)
				this.openPage('/pages/creditcard/autoPayMoney/preview', params)

			},
			// 绑卡
			bangka() {
				let that = this;
				let params = {
					bank_card_id: that.dataJson.plan.user_bankcards_id,
					channel: that.dataJson.plan.channel,
				}
				uni.showLoading({
					title: '查询授权状态...'
				})
				cAuthentication(params).then(res => {
					uni.hideLoading()
					if (res == 'BIND_CARD_AUTH') {
						let params2 = {
							plan_id: that.dataJson.plan.id
						}
						planMakeCon(params2).then(res2 => {
							uni.showToast({
								title: '制定成功',
								icon: 'none'
							})
							uni.$u.route({
								url: 'pages/creditcard/autoPayMoney/list',
								params: {}
							})

						})
					} else {
						if (res.type == 'sms') {
							let defultJson2 = {
								type: 2,
								mobile: res.mobile,
								channel_bankcard_id: res.channel_user_bankcard_id,
								plan_id: that.dataJson.plan.id,
								mobile: res.mobile
							}
							uni.$u.route({
								url: 'pages/creditcard/authorization',
								params: {
									defultJson: JSON.stringify(defultJson2)
								}
							})
						}

					}
				})
			},

		}
	}
</script>
<style>
	page {
		background-color: #f4f5f7;
	}
</style>
<style scoped lang="scss">
	.bank {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		background-color: #fff;
		margin: 30rpx 0;
		position: relative;

		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 100%;
			margin-right: 10rpx;
		}

		.load {
			position: absolute;
			right: 0;
			top: 0;
			padding: 0 30rpx;
			font-weight: bold;
			height: 100%;
			color: #ec6a38;
			line-height: 100rpx;
			display: flex;
			flex-direction: row;
		}
	}

	.moneryInfo {
		background-color: #fff;
		padding: 15rpx 30rpx;
		margin: 30rpx 0;

		.items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 2.3;
			// font-weight: bold;
			font-size: 28rpx;
			padding: 10rpx 0;

			.l {
				color: #b8b8b8;
			}

			.r {

				color: #333;
				text-align: right;
			}
		}
	}

	.bankInfo {
		background-color: #fff;
		padding: 15rpx 0;
		margin: 30rpx 0;

		.items {
			padding: 10rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 2.3;
			// font-weight: bold;
			font-size: 28rpx;
			position: relative;

			u-icon {
				position: absolute;
				right: 15rpx;
				top: 0;
				height: 100%;
				color: #949494;
			}

			.l {
				color: #2E2E2E;
			}

			.r {
				color: #8E8E93;
				flex: 1;
				text-align: left;
				padding: 0 20rpx;
				width: 100rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

			}
		}
	}

	.reserve {
		width: 100%;
		display: block;
		margin: 0 auto;
		padding: 0 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
		border-radius: 8rpx;

		text {
			color: red;
		}
	}

	.btn {
		width: 690rpx;
		height: 94rpx;
		color: #fff;
		margin: 0 auto;
		font-size: 36rpx;
		text-align: center;
		line-height: 94rpx;
		border-radius: 20rpx;
		background-color: #ec6a38;
		margin-top: 50rpx;
	}
</style>
